<script lang="ts" setup>
  import { onMounted, nextTick, ref, onUnmounted } from 'vue'
  import BaseForm from './components/base.vue'
  import './style.scss'
  import watermark from '@/utils/waterMarker'
  import { CompetitionPostData } from '@/types/competition'
  import { getCompetitionService } from '@/api/competitios'
  import { ElMessage } from 'element-plus'
  import { useRoute, useRouter } from 'vue-router'

  const containerRef = ref<HTMLElement>()
  let destroyWatermark: (() => void) | undefined
  const route = useRoute()
  const router = useRouter()
  const editId = ref<string>('237642480194031616')
  const editFormData = ref<CompetitionPostData>(null)
  //   初始化
  onMounted(() => {
    // 获取竞赛数据
    // if (route.params.id) {
    //   editId.value = route.params.id as string
    getCompetitionService('237642480194031616')
      .then((res) => {
        editFormData.value = res
        console.log('拿到的竞赛数据', res)
      })
      .catch((err) => {
        ElMessage.error('获取竞赛信息失败')
        // 返回上一个路由
        router.back()
      })
    // }
    nextTick(() => {
      if (containerRef.value) {
        setWaterMarker()
      }
    })
  })

  // 设置水印
  const setWaterMarker = () => {
    const options = {
      container: containerRef.value,
      width: 300, // 增加canvas宽度
      height: 120, // 增加canvas高度
      rotate: -20,
      globalAlpha: 0.15, // 透明度
      content: '学科竞赛', //
      font: '20px Microsoft Yahei', // 调整字体大小
      letterSpacing: '6px', //
    }
    destroyWatermark = watermark(options)
  }

  // 组件卸载时清理水印
  onUnmounted(() => {
    if (destroyWatermark) {
      destroyWatermark()
    }
  })
</script>
<template>
  <div ref="containerRef" class="app-container">
    <BaseForm :competition-id="editId" :edit-data="editFormData" />
  </div>
</template>
